<template lang="html">
  <div style="display: block; background-color:#e2e2e2">
    <headerT v-show="!showflag"></headerT>
    <section v-show="!showflag">
      <swiper class="swip_1" :options="swiperOption"  ref="mySwiper">
          <!-- 这部分放你要渲染的那些内容 -->
          <swiper-slide v-for="(item,index) in items">
              <img :src="item.pic" class="index_img">
          </swiper-slide>
          <!-- 这是轮播的小圆点 -->
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <hangxian :wonderful = "wonderfulRouteV2"></hangxian>
      <kaisadujia></kaisadujia>
      <mudi></mudi>
      <div class="jing_cai">
          <h3 class="dujia_h3 jing_h3" style="border:0px;">
              <span class="h3_01"></span>
              <span class="h3_02">邮轮公司</span>
          </h3>
      </div>
      <lunsi :company = "companys"></lunsi>
      <div class="hui"></div>
      <wenti :question = "questions"></wenti>
      <div class="jing_cai">
          <h3 class="dujia_h3 jing_h3" style="border:0px;">
              <span class="h3_01"></span>
              <span class="h3_02">当季推荐</span>
          </h3>
      </div>
      <tuijian v-if="seasonRecommended" :seasonR="seasonRecommended"></tuijian>
    </section>
    <foot v-show="!showflag" :shipTip="shipTips"></foot>
  <allCountry v-show="showflag">
  </allCountry>
  </div>
</template>

<script>
import headerT from './tour2/header'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import hangxian from './tour2/neirong1'
import kaisadujia from './tour2/neirong2'
import mudi from './tour2/nerirong3'
import lunsi from './tour2/lunsi'
import wenti from './tour2/youlunwenti'
import tuijian from './tour2/tuijian'
import foot from './tour2/footer'
import allCountry from './tour2/allCountry'
import bus from '../js/bus'
export default {
  data(){
    return{
      swiperOption: {
          notNextTick: false,
          pagination: '.swiper-pagination',
          slidesPerView: 'auto',
          centeredSlides: true,
          autoplay: 3000,
          paginationClickable: true,
          preventClicks: false,
          autoplayDisableOnInteraction:false,
          onSwiping: false
          // observer:true,//修改swiper自己或子元素时，自动初始化swiper
          // observeParents:true//修改swiper的父元素时，自动初始化swiper

      },
      items:[],
      wonderfulRouteV2:[],
      companys:[],
      questions:[],
      seasonRecommended:[],
      shipTips:{},
      showflag:false
    }
  },
  components:{
    headerT,
    swiper,
    swiperSlide,
    hangxian,
    kaisadujia,
    mudi,
    lunsi,
    wenti,
    tuijian,
    foot,
    allCountry
  },
  created(){
    this.getList();
    bus.$on('cityflag',()=>{
      this.showflag = true
    })
    bus.$on('cityflag_',()=>{
      this.showflag = false
    })
    bus.$on('citynameda',data=>{
      console.log(data);
      this.showflag = false
    })
  },
  methods:{
    getList(){
      this.axios.get('http://txspring.cn:8080/getLun').then((response)=> {
         console.log(response);
         if (response.data.code == 200) {

           for (let i = 0; i < response.data.data.banners.length; i++) {
             this.items.push(response.data.data.banners[i])
           }
           this.wonderfulRouteV2 = response.data.data.wonderfulRouteV2;
           this.companys = response.data.data.companys
           this.questions = response.data.data.questions[1]
           this.seasonRecommended = response.data.data.seasonRecommended
           this.shipTips = response.data.data.shipTips
           console.log(this.seasonRecommended);
         } else {
           alert(response.data.data.msg);
         }
         this.swiperOption.loop = true;
       }) .catch(function (error) {
          console.log(error);
        });
    },
  }
}
</script>

<style lang="css" scoped>
.hui {
    width: 100%;
    height: 10px;
    background-color: #f5f5f5;
}
.swip_1{
  height: 15rem;
}
.swiper-pagination{
  top: 13rem;
}
.swiper-pagination-bullet{
  margin-right: 0.5rem;
}
.swip_1 img{
  width: 100%;
  height: 100%;
}
.swiper-pagination-bullet-active{
  background-color: red;
}
.swiper-pagination-bullet{
  background-color: rgba(255,255,255,.5);
}
.jing_cai {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}
.jing_h3 {
    margin-left:5px;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
}
.dujia_h3 {
    width: 100%;
    padding: 10px 0px;
    padding-right: 10px;
    position: relative;
    margin-left: 5px;
    text-align: left;
}
.h3_02 {
    font-size: 16px;
    margin-left: 20px;
    color: #333333;
}
.h3_01 {
    height: 18px;
    background-color: #ffaa01;
    width: 6px;
    border-radius: 4px;
    display: inline-block;
    position: absolute;
    z-index: 2;
    left: 5px;
    top: 15px;
}
</style>
